<%--
  Created by IntelliJ IDEA.
  User: nick
  Date: 8/08/12
  Time: 2:37 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="org.codehaus.groovy.grails.commons.ConfigurationHolder; grails.converters.JSON" contentType="text/html;charset=UTF-8" %>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>Tree for ${treeInstance.name}</title>
    <meta name="layout" content="main"/>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'PhyloJive.css')}" type="text/css" media="screen" />
    <link rel="stylesheet" href="${resource(dir: 'css/colorbox', file: 'colorbox.css')}" type="text/css" media="screen" />
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.contextMenu.css')}" type="text/css" media="screen" />

    <script type="text/javascript" src="${resource(dir: 'js', file: 'jit.js')}"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.colorbox-min.js')}"></script>
    <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.contextMenu.js')}"></script>
    <script type="text/javascript" src="${resource(dir: 'js', file: 'jsphylosvg-min.js')}"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
    <script type="text/javascript" src="${resource(dir: 'js', file: 'PhylogenyExplorer.js')}"></script>
    <!--[if IE]><script language="javascript" type="text/javascript" src="${resource(dir: 'js', file: 'excanvas.js')}"></script><![endif]-->
    <script type="text/javascript">
        var tree = "${treeInstance.newick}";
        var characters = jQuery.parseJSON( '${treeInstance.characters?:""}' );
        var IlDataset = "${treeInstance.identifyLifeDataset}";

        $(document).ready(function() {
            url = "${createLink(controller: 'proxy', action: 'getCharactersPost')}"; //used
            init_phylojive(tree, characters, url);
        });

        function init_phylojive(tree, characters, url) {
            //console.log("getkey", getKey(characters), getKey(characters[getKey(characters)]));
            phylogenyExplorer_init({
                width: 900,
                height: 600,
                tree: tree,
                branchMultiplier: 2,
                charServiceUrl: url,
                character: characters,
                attribution: "${treeInstance.attribution?.normalize().encodeAsHTML()?.replace('\n', '<br/>')?:''}",
                toolWidget: "tabs", // tabs || accordion
                codeBase: "${resource(dir: 'images')}",
                hideInput: true,
                <g:if test="${treeInstance.identifyLifeDataset =='acacia'}">mapParams: "&fq=data_provider_uid:dp36", // AVH only</g:if>
                presentClade: function(clade) {
                    var tmpl = st.config.tmpl, nodeList = [], node, html, split;
                    for (var i = 0;
                         ((i < clade.length) & (i < 30)); i++) {
                        node = {}
                        node.name = clade[i].name;
                        node.plus = clade[i].name.replace(/\s+/g, '+');
                        split = node.name.split(/\s+/);
                        if (split.length > 1) {
                            node.genus = split[0];
                            node.species = split[1];
                        } else {
                            node.species = split[0];
                        }
                        node.rel = node.species + '' + i;
                        node.index = i;
                        nodeList.push(node);
                    }
                    if (tmpl) {
                        tmpl = _.template(tmpl);
                        html = tmpl({
                            nodeList: nodeList
                        });
                    } else {

                    }
                    return html;

                },
                //presentClade
                tmpl: '${treeInstance.presentClade?.code?:defaultTmpl}'
            });
            st.config.initCharacter = false;
        } // end init_phylojive

        function objLength(obj) {
            var L=0;
            $.each(obj, function(i, elem) {
                L++;
            });
            return L;
        }

    </script>
</head>
<body>
<div id="content">
    <header id="page-header">
        <div class="inner">
            %{--<button id="newTreeButton" class="btn" onclick="location.href='${createLink(controller:"tree", action:"create")}'">Create a new tree</button>--}%
            <nav id="breadcrumb">
                <ol class="breadcrumb">
                    <li><a href="${grailsApplication.config.ala.baseURL}">Home</a> <span class=" icon icon-arrow-right"></span></li>
                    <li><a href="${createLink(uri: '/')}">Phylojive</a> <span class=" icon icon-arrow-right"></span></li>
                    <li class="last">Tree Viewer</li>
                </ol>
            </nav>
            <h1>Tree: ${treeInstance.name}</h1>
            <phy:isLoggedIn>
                %{--<hf:ifGranted role="ROLE_ADMIN">--}%
                <div style="color:#999;margin-bottom: 20px;">
                    Admin actions:
                    <g:link controller="tree" action="list" style="color:#999;font-size:12px;" class="btn btn-mini">Tree list</g:link>&nbsp;
                    <g:link controller="tree" action="edit" id="${treeInstance.id}" style="color:#999;font-size:12px;" class="btn btn-mini">Edit tree</g:link>
                    <g:link controller="tree" action="create" style="color:#999;font-size:12px;" class="btn btn-mini">Create a new tree</g:link>
                </div>
                %{--</hf:ifGranted>--}%
            </phy:isLoggedIn>
        </div><!--inner-->
    </header>
    <div class="row-fluid">
        <div id="section" class="span12">
            <div id="infovis"></div>
        </div>
    </div>
</div>
</body>
</html>